<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/js/DataTables/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/Jquery/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/JqueryMobile/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="API/js/DataTables/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="API/js/functionsLib.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script type="text/javascript">
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 100;
    var g_compareElement = [];

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //Fin chargement page
    function OnLoad() {
        try {
            chargerEvents();
        } catch (er) {
            $.functionsLib.log(0, "ERROR(OnLoad):" + er.message);
        }
    }
    
    /**
     * @name popUpDetails
     * @param {json} p_params
     * @returns {Boolean}
     */
    function popUpDetails(p_params) {
        try {
            var popUpWidth = $( document ).width() * 0.80;
            $('#popup').width(popUpWidth).addClass( "mod" );
            
            var tabSetting = {
            };
            
            var params = {
                key : p_params.key,
                lang : p_params.lang,
                date_record : p_params.date_update_data
            };
                
            var retourCurrent = $.functionsLib.callRest(domaine+"phpsql/getElementDetails.php", tabSetting, params);
            
            var params = {
                key : p_params.key,
                lang : p_params.lang,
                date_update_data : p_params.date_update_data
            };
            var arboElements = $.functionsLib.callRest(domaine+"phpsql/getElementArbo.php", tabSetting, params);
            
            var strhtml = "";
            strhtml += '<table style="width:100%">';
            
            strhtml += '<tr>';
            strhtml += '<td style="width:50%">Version : <br>'+p_params.lang+', '+p_params.date_update_data+'</td>';
            strhtml += '<td style="width:50%">Compare version : ';
            strhtml += '<div data-role="controlgroup" data-type="horizontal" data-mini="true">';
            strhtml += '<select name="select-element" id="select-element" onChange="openCompareElement(this.value);">';
            strhtml += '<option>Select an element</option>';
            var i=0;
            for(var lang in arboElements["data"]){
                for(var indice in arboElements["data"][lang]){
                    g_compareElement[i] = {
                        key : p_params.key
                        , lang : lang
                        , date_record : arboElements["data"][lang][indice]["date_record"]
                    };
                    strhtml += '<option value="'+i+'">'+lang+' - '+arboElements["data"][lang][indice]["date_record"]+'</option>';
                }
            }
            
            strhtml += '</select>';
            strhtml += '</div>';
            strhtml += '</td>';
            strhtml += '</tr>';
            
            strhtml += '<tr>';
            strhtml += '<td style="vertical-align:top;"><textarea id="inputCurrentCode" style="font-size:small;family-name:arial;min-height:300px;">'+retourCurrent["data"]["resultat"]["data"]+'</textarea></td>';
            strhtml += '<td style="vertical-align:top;"><textarea id="inputCompareCode" style="font-size:small;family-name:arial;min-height:300px;"></textarea></td>';
            strhtml += '</tr>';
            
            strhtml += '</table>';
            strhtml += '<p style="text-align:center"><a href="#" onClick="markReadEvent('+p_params.id+')" class="ui-link ui-btn ui-icon-check ui-btn-icon-left ui-btn-inline ui-shadow ui-corner-all ui-mini">Mark as read</a></p>';
            
            $.functionsLib.affichePopUp('Details for item : '+p_params.key, strhtml);
            
            return true;
        } catch (er) {
            $.functionsLib.log(0, "ERROR(popUpDetails):" + er.message);
            return null;
        }
    }
    
    /**
     * @name openCompareElement
     * @param {json} p_params
     * @returns {Boolean}
     */
    function openCompareElement(p_i) {
        try {
            var tabSetting = {
            };
            
            var params = g_compareElement[p_i];
                
            var retour = $.functionsLib.callRest(domaine+"phpsql/getElementDetails.php", tabSetting, params);
            
            $('#inputCompareCode').val(retour["data"]["resultat"]["data"]);
            
            return true;
        } catch (er) {
            $.functionsLib.log(0, "ERROR(openCompareElement):" + er.message);
            return null;
        }
    }

    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    /**
     * @name chargerEvents
     * @desc Hello
     * @param {type} nom
     * @return {boolean}
     */
    function chargerEvents(){
        try {
            var myReturn = true;
            
            var tabSetting = { functionRetour : retourEvents};
            var tabInput = { test : 'ok' };
            $.functionsLib.callRest(domaine+"phpsql/getEvents.php", tabSetting, tabInput); 
            
            return myReturn;
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerEvents):" + er.message);
            return null;
        }
    }

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    /**
     * @name retourEvents
     * @param {json} p_retour
     */
    function retourEvents(p_retour){
        try {
            var myReturn = true;
            
            if(p_retour["strErreur"] == ""){
                var objDataTable = $.functionsLib.objDataTableFromJsonArray(p_retour["data"]["resultat"]["data"]);
                var strhtml = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_events"></table></br></br>';
                $('#div_exemple').html(strhtml).trigger('create');
            
                var oTable = $('#table_events').dataTable( {
                    "sPaginationType": "full_numbers",
                    "aaData": objDataTable.data,
                    "bSort": false,
                    "aoColumns": [
                        { "sTitle": "Key","sClass": "Left" },
                        { "sTitle": "Description","sClass": "Left", "sWidth": "200px" },
                        { "sTitle": "Type","sClass": "center", "sWidth": "50px" },
                        { "sTitle": "Lang","sClass": "center", "sWidth": "50px" },
                        { "sTitle": "Date event","sClass": "Left", "sWidth": "150px" },
                        { "sTitle": "Auteur","sClass": "center", "sWidth": "80px" },
                        { "sTitle": "Action","sClass": "center", "sWidth": "120px" }
                    ],
                    "aoColumnDefs": [
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["key"]];
                            },
                            "aTargets": [ 0 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["description"]];
                            },
                            "aTargets": [ 1 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["type"]];
                            },
                            "aTargets": [ 2 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["lang"]];
                            },
                            "aTargets": [ 3 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["date_update_data"]];
                            },
                            "aTargets": [ 4 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["nom_updator"]];
                            },
                            "aTargets": [ 5 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                var strHtml = "";
                                strHtml += '<a data-mini="true" href="javascript:popUpDetails({id:'+row[objDataTable.entete["id"]]+',key:\''+row[objDataTable.entete["key"]]+'\',lang:\''+row[objDataTable.entete["lang"]]+'\',date_update_data:\''+row[objDataTable.entete["date_update_data"]]+'\'})" data-role="button" data-icon="gear" data-inline="true" id="bt_edit_'+row[0]+'" data-mini="true">Details</a>';
                                return strHtml;
                            },
                            "aTargets": [ 6 ]
                        }
                    ],
                    "fnDrawCallback": function( oSettings ) {
                        $('#table_events').trigger('create');
                    } 
                });
            } else{
                $.functionsLib.notification("Erreur : "+p_retour["strErreur"], $.functionsLib.oda_msg_color.ERROR);
            }
            
            return myReturn;
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourEvents):" + er.message);
            return null;
        }
    }
    
    /**
     * @name markReadEvent
     * @param {int} p_id_event
     * @returns {Boolean}
     */
    function markReadEvent(p_id_event) {
        try {
            var tab_input = {
                
            };
            
            var tab_data = {
                idEvent : p_id_event,
                idUser : $.functionsLib.getUserInfo().id
            };
            
            $.functionsLib.callRest(domaine+"phpsql/setEventRead.php", tab_input, tab_data);
            
            chargerEvents();
            
            $('#popup').popup('close');
            
            return true;
        } catch (er) {
            $.functionsLib.log(0, "ERROR(markReadEvent):" + er.message);
            return null;
        }
    }
</script>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./api_page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->
        
        <!-- navbar -->
        <!-- /navbar -->

        <!-- content -->
        <div data-role="content" id="main_content">
            
            <!-- PopUp -->
            <div data-role="popup" id="popup" class="ui-content">
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
                <div>
                    <label id="label_popup"></label>
                    <div id="div_popup"></div>
                </div>
            </div>
            <!-- /PopUp -->
            
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h4>Events</h4>
                <div id="div_exemple" style="font-size:small;">Anomalie code EXXX</div>
            </div>       
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./api_page_faq.html?mili='+$.functionsLib.getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./api_page_sortie.html?mili='+$.functionsLib.getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>